<template>
    <view>
        <!--index.wxml-->
        <view class="news-page" v-if="!isTabSelector">
            <!--爱好选择栏-->
            <scroll-view class="favor-bar" :scroll-x="true">
                <view class="favor-tab">
                    <text class="favor-search iconfont icon-sousuo1" @tap="tosearch"></text>
                    <view
                        @tap="getNewsdes"
                        :class="'favor-item ' + (channelId == item.channelId ? 'favor-item-active' : '') + ' '"
                        :data-channelId="item.channelId"
                        v-for="(item, index) in favorData"
                        :key="index"
                    >
                        {{ item.name }}
                    </view>
                </view>
                <text class="favor-add iconfont icon-tianjia3" @tap="ctrlSelector"></text>
            </scroll-view>
            <!--加载-->
            <view :class="isPullDown == true ? 'ball-beat' : ''">
                <view></view>
                <view></view>
                <view></view>
            </view>
            <!--轮播图-->
            <view class="news">
                <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" height="170px">
                    <block @tap.native="tourl" v-for="(item, index) in scrollData" :key="index">
                        <swiper-item v-if="item.imageurls[0] != null">
                            <view @tap="tourls" style="position: relative; left: 0; top: 0">
                                <image :src="item.imageurls[0].url" class="slide-image" :data-index="index" mode="aspectFill" style="width: 100%" />
                                <view class="swiper-news-title" :data-index="index">{{ item.title }}</view>
                            </view>
                        </swiper-item>
                    </block>
                </swiper>
                <!--新闻列表-->
                <view class="news-list">
                    <!--单个新闻-->
                    <view class="news-item" @tap="tourl" :data-index="index" v-for="(item, index) in newsData" :key="index">
                        <view class="news-item-info">
                            <view class="header">
                                <text class="channelName" :data-index="index">{{ item.channelName }}</text>
                                <text class="source" :data-index="index">{{ item.source }}</text>
                            </view>
                            <view class="title" :data-index="index">{{ item.title }}</view>
                            <view class="time" :data-index="index">{{ item.pubDate }}</view>
                        </view>

                        <view class="news-item-image" v-if="item.imageurls[0] != null">
                            <image
                                :src="item.imageurls[0].url"
                                v-if="item.imageurls[0] != null"
                                style="width: 100%; height: 100%"
                                data-url="/pages/details/details"
                                :data-index="index"
                                mode="aspectFill"
                            ></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="tab-selector" v-if="isTabSelector" :animation="animationData">
            <view class="selector-header">
                <text>频道定制</text>
                <text class="iconfont icon-guanbi1 close-selector" @tap="ctrlSelector"></text>
            </view>
            <view class="select-body">
                <view class="attration">
                    <view class="attration-title">焦点频道</view>
                    <view
                        :data-index="index"
                        :class="'tab-item  ' + (item.selected == true ? 'selected' : '')"
                        @tap="ctrlAttration"
                        v-for="(item, index) in attrationData"
                        :key="index"
                    >
                        {{ item.name }}
                    </view>
                </view>
                <view class="newest">
                    <view class="newest-title">最新频道</view>
                    <view :data-index="index" :class="'tab-item  ' + (item.selected == true ? 'selected' : '')" @tap="ctrlNews" v-for="(item, index) in newestData" :key="index">
                        {{ item.name }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
//index.js
//获取应用实例
var request = require('../../utils/request.js');

var app = getApp();
export default {
    data() {
        return {
            url: '/pages/details/details?',
            imgUrls: [
                'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
                'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
                'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
            ],
            indicatorDots: true,
            autoplay: true,
            interval: 5000,
            duration: 1000,
            isTabSelector: false,
            channelId: null,
            page: 1,
            isPullDown: false,
            favorData: [
                {
                    channelId: '5572a108b3cdc86cf39001cd',
                    name: '国内',
                    selected: true
                },
                {
                    channelId: '5572a108b3cdc86cf39001ce',
                    name: '国际',
                    selected: true
                },
                {
                    channelId: '5572a108b3cdc86cf39001cf',
                    name: '军事',
                    selected: true
                },
                {
                    channelId: '5572a108b3cdc86cf39001d0',
                    name: '财经',
                    selected: true
                },
                {
                    channelId: '5572a108b3cdc86cf39001d1',
                    name: '互联网',
                    selected: true
                },
                {
                    channelId: '5572a108b3cdc86cf39001d5',
                    name: '娱乐',
                    selected: true
                },
                {
                    channelId: '5572a108b3cdc86cf39001d6',
                    name: '游戏',
                    selected: true
                },
                {
                    channelId: '5572a108b3cdc86cf39001d2',
                    name: '房产',
                    selected: true
                },
                {
                    channelId: '5572a108b3cdc86cf39001d9',
                    name: '科技',
                    selected: true,
                    page: 1
                },
                {
                    channelId: '5572a10ab3cdc86cf39001ec',
                    name: '电影最新',
                    selected: true
                }
            ],
            newsData: [],
            scrollData: [],
            attrationData: [],
            newestData: [],
            animationData: {}
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.getItems();
        this.getNewOne('5572a108b3cdc86cf39001cd');
    },
    onReady: function () {
        // 页面渲染完成
        console.log(2);
    },
    onShow: function () {
        console.log(3);
    },
    onHide: function () {
        console.log(4); // 页面隐藏
    },
    onUnload: function () {
        console.log(5); // 页面关闭
    },
    //下拉刷新
    onPullDownRefresh: function () {
        var that = this; // _this.setData({
        //   isPullDown:true
        // });

        this.getNewOne(this.channelId);
        setTimeout(function () {
            // _this.setData({
            //   isPullDown:false
            // })
            uni.stopPullDownRefresh();
        }, 1500);
    },
    //上拉加载
    onReachBottom: function () {
        uni.showToast({
            title: '正在加载',
            icon: 'loading',
            duration: 1000
        });
        var that = this;
        that.page = that.page + 1;
        uni.request({
            url: 'https://route.showapi.com/109-35',
            data: {
                channelId: that.channelId,
                channelName: '',
                maxResult: '15',
                needAllList: '',
                needContent: '1',
                needHtml: '',
                page: that.page,
                showapi_appid: '860473',
                title: '',
                showapi_sign: '772248c40b324c43b245b027004b528a',
                showapi_timestamp: ''
            },
            header: {
                'content-type': 'application/json'
            },
            success: function (res) {
                var list = res.data.showapi_res_body.pagebean.contentlist;
                 list.forEach(function (obj) {
                    that.newsData.push(obj);
                });
                that.setData({
                    newsData: that.newsData,
                    page: that.page
                });
            },
            fail: function () {
                request.error();
            }
        });
    },
    methods: {
        //列表
        tourl: function (e) {
            // object转换get字符串
            var index = e.target.dataset.index;
            var temp = this.newsData[index];
            app.globalData.array = temp; // var urls=this.data.url;
            // console.log("aa",index,temp);
            // urls=urls+"&title="+temp.title+
            // "&source="+temp.source+"&pubDate="+temp.pubDate+"&channelName="+temp.channelName;
            // for(var i=0;i<temp.allList.length;i++){
            //   if(temp.allList[i].url!=null){
            //     urls=urls+"&"+i+"="+temp.allList[i].url
            //   }else{
            //     urls=urls+"&"+i+"="+temp.allList[i]
            //   }
            // }

            uni.navigateTo({
                url: '/pages/details/details'
            });
        },

        //滚动条
        tourls: function (e) {
            // object转换get字符串
            var index = e.target.dataset.index;
            var temp = this.scrollData[index];
            app.globalData.array = temp;
            console.log('bb', app.globalData.array);
            uni.navigateTo({
                url: '/pages/details/details'
            });
        },

        //搜索
        tosearch: function () {
            uni.switchTab({
                url: '/pages/todes/todos'
            });
        },

        //获取目录
        getItems: function () {
            var that = this;
            uni.request({
                url: 'https://route.showapi.com/109-34',
                data: {
                    showapi_appid: '860473',
                    showapi_sign: '772248c40b324c43b245b027004b528a'
                },
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    //生成喜好添加页的选项
                    var channelList = res.data.showapi_res_body.channelList;
                    var favorData = that.favorData;
                    channelList.forEach(function (obj) {
                        for (var i = 0; i < favorData.length; i++) {
                            if (obj.channelId == favorData[i].channelId) {
                                obj.selected = true;
                                break;
                            } else {
                                obj.selected = false;
                            }
                        }
                    });
                    channelList.forEach(function (obj) {
                        if (obj.name.substr(-2) == '焦点') {
                            obj.name = obj.name.substring(0, obj.name.length - 2);
                            that.attrationData.push(obj);
                        } else {
                            if (obj.name.substr(-2) == '最新') {
                                obj.name = obj.name.substring(0, obj.name.length - 2);
                                that.newestData.push(obj);
                            }
                        }
                    }); //  _this.data.favorData= _this.data.favorData.slice(0,10);
                    //  for(var i=0;i<_this.data.favorData.length;i++){
                    //     _this.data.favorData[i].name=_this.data.favorData[i].name.slice(0,2);
                    //  }

                    that.setData({
                        attrationData: that.attrationData,
                        newestData: that.newestData
                    });
                },
                fail: function () {
                    request.error();
                }
            });
        },

        //切换数据
        getNewsdes: function (e) {
            var that = this;
            that.page = 1;
            this.setData({
                channelId: e.target.dataset.channelid
            });
            uni.request({
                url: 'https://route.showapi.com/109-35',
                data: {
                    channelId: e.target.dataset.channelid,
                    channelName: '',
                    maxResult: '15',
                    needAllList: '',
                    needContent: '1',
                    needHtml: '',
                    page: '1',
                    showapi_appid: '860473',
                    title: '',
                    showapi_sign: '772248c40b324c43b245b027004b528a',
                    showapi_timestamp: ''
                },
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    that.scrollData = [];
                    var list = res.data.showapi_res_body.pagebean.contentlist;
                    var n = 0;

                    for (var i = 0; n < 3 && i < list.length; i++) {
                        if (list[i].imageurls.length > 0) {
                            that.scrollData.push(list[i]);
                            list.splice(i, 1);
                            n++;
                        }
                    }

                    that.newsData = list;
                    that.setData({
                        newsData: that.newsData,
                        scrollData: that.scrollData,
                        page: that.page
                    });
                },
                fail: function () {
                    request.error();
                }
            });
        },

        //首页
        getNewOne: function (id) {
            var that = this;
            uni.request({
                url: 'https://route.showapi.com/109-35',
                data: {
                    channelId: id,
                    channelName: '',
                    maxResult: '15',
                    needAllList: '',
                    needContent: '1',
                    needHtml: '',
                    page: '1',
                    showapi_appid: '860473',
                    title: '',
                    showapi_sign: '772248c40b324c43b245b027004b528a',
                    showapi_timestamp: ''
                },
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    that.scrollData = [];
                    var list = res.data.showapi_res_body.pagebean.contentlist;
                    var n = 0;

                    for (var i = 0; n < 3 && i < list.length; i++) {
                        if (list[i].imageurls.length > 0) {
                            that.scrollData.push(list[i]);
                            list.splice(i, 1);
                            n++;
                        }
                    }

                    that.newsData = list;
                    that.setData({
                        newsData: that.newsData,
                        scrollData: that.scrollData,
                        channelId: id
                    });
                },
                fail: function () {
                    request.error();
                }
            });
        },

        //控制喜好选择的页面
        ctrlSelector: function () {
            var that = this;
            that.favorData = [];
            this.attrationData.forEach(function (obj) {
                if (obj.selected) {
                    that.favorData.push(obj);
                }
            });
            this.newestData.forEach(function (obj) {
                if (obj.selected) {
                    that.favorData.push(obj);
                }
            });
            this.setData({
                isTabSelector: !this.isTabSelector,
                favorData: this.favorData
            });
        },

        //控制焦点频道标签是否选择
        ctrlAttration: function (e) {
            var index = e.target.dataset.index;
            this.attrationData[index].selected = !this.attrationData[index].selected;
            this.setData({
                attrationData: this.attrationData
            });
        },

        //控制最新频道标签是否选择
        ctrlNews: function (e) {
            var index = e.target.dataset.index;
            console.log(this.newestData[index].selected);
            this.newestData[index].selected = !this.newestData[index].selected;
            this.setData({
                newestData: this.newestData
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
